<template>
  <div class="reg-container">
    <Banner subtitle="欢迎注册" :p="p" />
    <el-dialog
      title="用户协议"
      :visible.sync="userDialogVisible"
      width="30%"
      top="3vh" 
      center
    >
      <UserClauses />
    </el-dialog>
    <el-dialog
      title="隐私声明"
      :visible.sync="privicyDialogVisible"
      width="30%"
      top="3vh"
      center
    >
      <PrivacyClauses />
    </el-dialog>
    <div
      class="form-container"
      :style="{
        background: `url(${img}) no-repeat center/cover`,
      }"
    >
      <RegForm
        @openPrivacy="
          () => {
            privicyDialogVisible = true;
          }
        "
        @openUserPrivacy="
          () => {
            userDialogVisible = true;
          }
        "
      />
    </div>
  </div>
</template>

<script>
import Banner from "@/components/LoginComps/Banner.vue";
import RegForm from "@/components/RegComps/RegForm.vue";
import img from "@/assets/data/exports/背景图.jpeg";
import UserClauses from "@/components/RegComps/UserClauses.vue";
import PrivacyClauses from "@/components/RegComps/PrivacyClauses.vue";
export default {
  components: {
    Banner,
    RegForm,
    UserClauses,
    PrivacyClauses,
  },
  data() {
    return {
      img,
      p: 6,
      userDialogVisible: false,
      privicyDialogVisible: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.reg-container {
  height: Max(820px, 100vh);
  // overflow: hidden;
  //   background: lightblue;
  .form-container {
    height: calc(100% - 70px);
    position: relative;
  }
}
</style>
